import React, { memo, useState, useEffect } from "react";
import { GoodsDetailGoodsRelatedWrapper } from "./style";
import { Tabs, Empty } from "antd";
import { getShopGoodsList } from "@/service/shop";
import GoodsItem from "../../../../views/shop/child/goods/goods-item";
const { TabPane } = Tabs;

export default memo(function GoodsRelated(props) {
  const { categoryId, id } = props;
  const [list, setlist] = useState([]);
  function callback(key) {
    console.log(key);
  }
  console.log(id);
  const getGoodsList = async (cid, id) => {
    const res = await getShopGoodsList(cid);
    let arr = res.data.result;
    arr = arr.filter((item) => {
      return item.id != Number(id);
    });

    console.log(arr);
    setlist(arr);
  };

  useEffect(() => {
    getGoodsList(categoryId, id);
  }, []);
  console.log(categoryId);
  return (
    <GoodsDetailGoodsRelatedWrapper>
      <Tabs type="card" defaultActiveKey="1" onChange={callback}>
        <TabPane tab="相关商品" key="1">
          {list.length > 0 ? (
            <div className="goods-list">
              {list.map((item) => {
                return <GoodsItem key={item.id} item={item}></GoodsItem>;
              })}
            </div>
          ) : (
            <div className="empty">
              <Empty description='暂无相关商品数据!' image={Empty.PRESENTED_IMAGE_SIMPLE} />
            </div>
          )}
        </TabPane>
        {/* <TabPane tab="Tab 2" key="2">
          Content of Tab Pane 2
        </TabPane> */}
      </Tabs>
    </GoodsDetailGoodsRelatedWrapper>
  );
});
